<template>
  <div>
    <el-dialog
      :title="$t('view')"
      :visible.sync="open"
      width="1200px"
      append-to-body
      center
    >
      <el-card class="box-card" style="margin-bottom: 20px">
        <el-descriptions :column="1">
          <el-descriptions-item :label="$t('employee_name')">{{
            form.employeeName
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('employer_name')">{{
            form.employerName
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('modified_by')">{{
            form.employeeName
          }}</el-descriptions-item>
        </el-descriptions>
        <el-table :data="form.details" border :max-height="tableHeight">
          <el-table-column
            :label="$t('modify_content')"
            align="center"
            prop="field"
          >
          </el-table-column>
          <el-table-column :label="$t('action')" prop="operation">
          </el-table-column>
          <el-table-column
            :label="$t('before')"
            align="center"
            prop="beforeChange"
          >
          </el-table-column>
          <el-table-column
            :label="$t('after')"
            align="center"
            prop="afterChange"
          >
          </el-table-column>
        </el-table>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" v-if="isEdit">{{
          $t("confirm")
        }}</el-button>
        <el-button @click="open = false">{{ $t("cancel") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  dicts: ["contribution_plan_type", "yes_or_no", "sys_oper_type"],
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      isEdit: true,
    };
  },
  methods: {
    handleView(data) {
      this.isEdit = false;
      this.form = data;
      this.open = true;
    },
    handleApproval(data) {
      this.isEdit = true;
      this.form = data;
      this.open = true;
    },
    confirm() {
      this.$emit("confirm", this.form);
      this.open = false;
    },
  },
};
</script>
